<template>
 <div>
  <!-- <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap>
  <span>
          {{citys+district}}
        </span>
        <span>正在定位</span> -->
  <el-table
    :data="tables"
    style="width: 100%; height: 500px;">
    <el-table-column
      label="Id"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="Image">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"
          @keyup="searchData(search,tableData)"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页条 -->
    <div v-if="!search" class="right">
      <el-pagination layout="prev, pager, next" :total="allPage*pageSize" :page-size="pageSize" @current-change="page"
      @size-change="page"
      :current-page.sync="currentPage"

      >
      </el-pagination>
    </div>
 </div>
</template>

<script>


  export default {
    data() {
      return {
        center: [121.59996, 31.197646],
        plugin: [{
                      pName: 'Geolocation',
                      events: {
                          init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                    console.log(result)
                    if (result && result.position) {
                    // 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息
                    /*self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];*/
                    self.loaded = true;
                    self.result=result;
                    if(result.addressComponent.city){
                      self.citys=result.addressComponent.city;
                    }else{
                      self.citys=result.addressComponent.province;
                    }
                    self.district=result.addressComponent.district;
                    self.$nextTick();
                 }
                });
              }
            }
          }],
        tableData: [],
        search: '',
        
        allPage: 0,
        
        pageSize: 10,
       
        currentPage: 0,
        totalPage:[],
        
        dataShow:[],
        BranList: [],
      }
    },
    
    created() {
      this.getBranList();
      this.getData();
         
    },
    computed: {
      tables () {
        const search = this.search
        const tableData = this.tableData
        //如果search 不为空 过滤数据
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return tableData.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        // 如果search为空
        //返回分页好的数据
        return this.getData();
        
      }
    },


    methods: {
      //获取品牌列表
      async getBranList() {
           const  res =  await this.$http.get('/api/brand/findAll.do')
           console.log(res.data);
           this.tableData = res.data
      },
      //分页 element ui 自带的事件
    	page(Page){ 	  
    	  this.currentPage = Page-1;
        this.dataShow = this.totalPage[this.currentPage];
        
    	},
      
      getData(){
        this.allPage = Math.ceil(this.tableData.length / this.pageSize) || 1 ;
         // 分组
         for (let i = 0; i<this.allPage; i++) {
          this.totalPage[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))
          
         }
         // 取值
          this.dataShow = this.totalPage[this.currentPage];

          return this.dataShow

   
      },
     
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>
<style scoped>
  .el-pagination {
    width: 300px;
    margin: 0 auto;
  }
</style>